//获取操作对象
var lists=document.querySelector(".row")
var pagination1=document.querySelector('.pagination1');

(async function(){
    //获取所有数据
    var txt=await PromiseAjax({
        url:'../php/list.php'
    })
    //把字符串转为数组对象
    var ar1=eval('('+txt+')');
    //创建分页器的参数对象
    var o1={
        pageInfo:{
            pagenum:1,
            pagesize:12,
            totalsize:ar1.length,
            totalpage:Math.ceil(ar1.length/12)
        }
    }
    //创建分页器的实例化对象
    new Pagination(pagination1,o1,(m)=>{
        //获取当前页所对应的数据
        var ar2=ar1.slice((m-1)*12,m*12)
        //拼接所有内容
        var str=''
        //遍历数组对象
        ar2.forEach(item=>{
            str+=`
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                <ol class="breadcrumb">
                    <li><a href="#">${item.cat_one_id}</a></li>
                    <li><a href="#">${item.cat_two_id}</a></li>
                    <li class="active">${item.cat_three_id}</li>
                </ol>  
                <img src="${item.goods_small_logo}">
                <div class="caption">
                    <h4>${item.goods_name}</h4>
                    <p>￥<span>${item.goods_price}</span></p>
                    <p><a href="./cart.html" class="btn btn-primary" role="button">进入购物车</a> <a href="#" class="btn btn-default" role="button" data-id="${item.goods_id}">查看商品详情</a></p>
                </div>
                </div>
            </div>
            `
        })
        //把拼接好的内容渲染到页面中
        lists.innerHTML=str
    })
})()

